<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      height: 100vh;
      background-color: black;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }

    .box {
      width: 100px;
      height: 100px;
      background: white;
      position: relative;
      border-radius: 50%;
      background-color: #E8E2D6;
      /* background-image: linear-gradient(to right, transparent 50%, #b4a078 0); */
      --angle: 180deg;
    }

    .left,
    .right {
      width: 50%;
      height: 100%;
      display: block;
      position: relative;
      overflow: hidden;
      float: left;
    }

    .left::before,
    .right::before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      position: relative;
    }

    .right::before {
      border-radius: 0 100% 100% 0 / 0 50% 50% 0;
      background-color: gray;
      transform-origin: 0 50%;
      transform: rotate(180deg);
    }
    .left::before {
      border-radius: 100% 0 0 100% / 50% 0 0 50%;
      background-color: gray;
      transform-origin: 100% 50%;
      transform: rotate(45deg);
    }

    svg {
      border-radius: 50%;
      transform: rotate(-90deg);
    }

    circle {
      stroke-width: 32px;
      fill: red;
      stroke: lightblue;
      stroke-dasharray: 5 5;
      /* animation: r 2s infinite; */
    }

    @keyframes r {
      to {
        stroke-dasharray: 100 100;
      }
    }
  </style>
</head>
<body>
  这里怎么计算呢？
  右边的最多旋转 （0, 180）角度
  角度超过180°时，旋转（angle-180）°
  <div class="box">
    <div class="left"></div>
    <div class="right"></div>
  </div>

  <div class="box">
    <svg viewBox="0 0 32 32">
      <circle r="16" cx="16" cy="16"></circle>
    </svg>
  </div>
</body>
</html>